<template>
	<view class="list-cell-wrapper flexRowNoWrap" :class="hasBorderBottom ? 'hasBorderBottom':''" @tap="click">
		<view class="list-cell-icon"><label :class="'iconfont '+listCellIcon"></label></view>
		<view class="list-cell-title">{{listCellTitle}}</view>
		<view class="list-cell-link font28 color-grey">{{listCellLink}}</view>
		<view v-if="hasRightArrow">
			<uni-icons type="arrowright" size="20" color="#999999"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否有底部border（最后一个cell的底部border必须设为false，不然会产生样式问题）
			hasBorderBottom: {
				type: Boolean,
				default: false
			},
			//左侧icon的class名称
			listCellIcon: {
				type: String,
				default: ''
			},
			//左侧标题内容
			listCellTitle: {
				type: String,
				default: ''
			},
			//右侧link内容
			listCellLink: {
				type: String,
				default: ''
			},

			//是否有右箭头
			hasRightArrow: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			click() {
				this.$emit('click', this.index);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.hasBorderBottom {
		border-bottom: 2rpx solid #e4e7ed;
	}

	.color-text {
		margin: 32rpx;
	}

	.list-cell-wrapper {
		padding: 26rpx 32rpx;
		align-items: center;

		.list-cell-icon {
			margin-right: 10rpx;
		}

		.list-cell-title {
			width: auto;
			text-align: left;
		}

		.list-cell-link {
			flex-grow: 1;
			text-align: right;
		}
	}
</style>
